<template>
    <div class="banner" :style="{
      backgroundColor: config.pageConfig.color,
    }">
        <div :style="{
          marginTop: config.pageConfig.marginTop + 'px',
          marginBottom: config.pageConfig.marginBottom + 'px',
          marginLeft: config.pageConfig.margin + 'px',
          marginRight: config.pageConfig.margin + 'px',
        }">
            <div class="notice-content"
            :class="config.pageConfig.style == 2 ? 'shadow-style' : ''"
            :style="
              config.pageConfig.style == 3
                ? {
                    borderStyle: 'solid',
                    borderWidth: config.pageConfig.borderWidth + 'px',
                    borderColor: config.pageConfig.borderColor,
                    backgroundColor: config.pageConfig.componentColor,
                    borderTopLeftRadius: config.pageConfig.radiusTop + 'px',
                    borderTopRightRadius: config.pageConfig.radiusTop + 'px',
                    borderBottomLeftRadius: config.pageConfig.radiusBottom + 'px',
                    borderBottomRightRadius: config.pageConfig.radiusBottom + 'px',
                }
                : {
                    backgroundColor: config.pageConfig.componentColor,
                    borderTopLeftRadius: config.pageConfig.radiusTop + 'px',
                    borderTopRightRadius: config.pageConfig.radiusTop + 'px',
                    borderBottomLeftRadius: config.pageConfig.radiusBottom + 'px',
                    borderBottomRightRadius: config.pageConfig.radiusBottom + 'px',
                }
            ">
                <div class="notice-image">
                    <img v-if="config.pageConfig.iconStyle==1&&config.pageConfig.iconShowStyle == '1'" src='../../../../../../assets/app/other/notice/notice1.png'/>
                    <img v-else-if="config.pageConfig.iconStyle==1&&config.pageConfig.iconShowStyle == '2'" src='../../../../../../assets/app/other/notice/notice2.png'/>
                    <img v-else-if="config.pageConfig.iconStyle==1&&config.pageConfig.iconShowStyle == '3'" src='../../../../../../assets/app/other/notice/notice3.png'/>
                    <img v-else-if="config.pageConfig.iconStyle==1&&config.pageConfig.iconShowStyle == '4'" src='../../../../../../assets/app/other/notice/notice4.png'/>
                    <img v-else-if="config.pageConfig.iconStyle==1&&config.pageConfig.iconShowStyle == '5'" src='../../../../../../assets/app/other/notice/notice5.png'/>
                    <img :src="config.pageConfig.iconUrl">
                </div>
                <div class="notice-line" :style="{
                     backgroundColor:config.pageConfig.lineColor
                }"></div>
                <div class="notice-word" :style="{
                     color:config.pageConfig.textColor,
                     fontSize:config.pageConfig.fontsize+'px',
                     fontWeight:config.pageConfig.fontbold?'bold':'400',
                }">
                    {{config.pageConfig.content}}
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
export default {
    name: "Notice",
};
</script>
<script lang="ts" setup>
import { reactive, onMounted } from "vue";
const config = defineProps({
    pageConfig: {
        type: Object,
        default: {
            iconStyle:1,
            iconShowStyle:'1',
            iconUrl:'',
            dataStyle:1,
            content:'',
            dataway:1,
            dataUrl:'',
            fontsize:14,
            fontbold:false,
            style: '1',
            borderColor: '#ededed',
            borderWidth: 1,
            color: '',
            componentColor: '#fff',
            lineColor: '#333',
            textColor: '#666',
            marginTop: 5,
            marginBottom: 5,
            margin:12,
            radiusTop: 4,
            radiusBottom: 4,
        },
    },
    show: {
        type: Boolean,
        default: true,
    },
});
let emits = defineEmits<{ (e: "close", flag: boolean): void }>();
const getWordContent=()=>{
    //其实这个是通过接口获取的
    if(config.pageConfig.dataStyle==1){
        config.pageConfig.content=''
    }
}
onMounted(() => {
   getWordContent()
})
</script>
<style lang="scss" scoped>
.banner {
    width: 100%;
    overflow: hidden;
}
.notice-content{
    padding: 0 10px;
    height: 36px;
    line-height: 36px;
    display: flex;
    align-items: center;
    font-size: 14px;
    .notice-image{
        display: table-cell;
        vertical-align: middle;
        line-height: 0;
        img{
            vertical-align: middle;
            top: -2px;
            max-height: 22px;
        }
    }
    .notice-line{
        margin-left: 10px;
        height: 12px;
        width: 1px;
        font-weight:bold;
    }
    .notice-word{
        margin-left: 10px;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
.shadow-style {
    border: none;
    box-shadow: 0 0 10px rgba(129, 131, 136, 0.7);
    -webkit-box-shadow: 0 0 10px rgba(129, 131, 136, 0.7);
    -moz-box-shadow: 0 0 10px rgba(129, 131, 136, 0.7);
}
</style>
